<!--
 * @Author: 可以清心
 * @Description: 
 * @Date: 2023-05-19 14:36:49
 * @LastEditTime: 2023-06-12 16:01:54
-->
<template>
	<div class="wrapper" @dblclick="dbClick" ref="screen">
		<t-header></t-header>
		<t-main :key="key" :list="list"></t-main>
	</div>
</template>

<script>
import axios from 'axios'
import THeader from './components/header';
import TMain from './components/main'

export default {
	name: 'App',
	components: {
		THeader,
		TMain
	},
	data(){
		return {
			key: 0,
			dbClick: function(){
				// alert("我就是这样")
				document.body.requestFullscreen();
			},
			list: [],
		}
	},
	created(){
		const {getList} = this;


		// 测试注释
		getList();
		let timeId = setInterval(getList, 1000 * 120); // 120秒再次调用

		this.$once("hook:beforeDestory", () => {
			if(timeId){
				clearInterval(timeId);
			}
		})
		// 测试注释
	},
	mounted(){
		const that = this;
		function resize(){
			that.key = new Date().getTime();
		}

		window.addEventListener("resize", resize);
		this.$once("hook:beforeDestory", () => {
			window.removeEventListener("resize", resize);
		})
	},
	methods: {
		getRequestParams(){
			const {getAppId} = this;
			const appId = getAppId();

			let json = localStorage.getItem('__vuex__' + appId + '__local');

			try{
				json = JSON.parse(json);

				if(json.authModule){
					let userInfo = json.authModule.userInfo;

					if(userInfo){
						return {
							data: {
								userId: userInfo.id,
								department: userInfo?.mainDepartment?.id
							},
							headers: {
								xdaptoken: json.authModule.token,
								xdaptenantid: userInfo.tenant.id,
								xdaptimestamp: new Date().getTime()
							}
						}
					}
				}
			}catch(error){
				throw new Error("json解析失败");
			}
		},
		getList(){
			const {getRequestParams} = this;
			const data = getRequestParams();
			axios({
				url: "/custom/electronicScreen/screenDisplay",
				method: "POST",
				data: data.data,
				headers: data.headers
			}).then(res => {
				const data = res.data.data;
				let list = [];
				let title = "";

				for(let key of Object.keys(data)){
					if(key === 'stayVehicles'){
						title = "待入门车辆";
					}

					if(key === 'approvalVehicles'){
						title = "审批中车辆";
					}

					if(key === 'stayOutVehicles'){
						title = "待出门车辆";
					}

					list.push({
						title,
						list: data[key]
					})
				}

				this.list = list;
			})
		},
		getAppId(){
			if(window.GLOBAL_ENV){
				return window.GLOBAL_ENV.VUE_APP_APP_ID;
			}else{
				return 'workbench';
			}
		},
		getListItem(title, list){
			return {
				title,
				list
			}
		}
	}
}
</script>

<style>
html, body{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	font-size: 10px;
	box-sizing: border-box;
}

body{
	padding: 1rem;
}

.wrapper{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 2.5rem;
	box-shadow:
		-2.3px -2.3px 1.2px rgba(0, 0, 0, 0.017),
		-3.4px -3.4px 2.7px rgba(0, 0, 0, 0.025),
		-3.2px -3.2px 4.6px rgba(0, 0, 0, 0.031),
		-1.5px -1.5px 6.9px rgba(0, 0, 0, 0.035),
		2.3px 2.3px 10px rgba(0, 0, 0, 0.04),
		8.5px 8.5px 14.2px rgba(0, 0, 0, 0.045),
		18.1px 18.1px 20.1px rgba(0, 0, 0, 0.049),
		32.7px 32.7px 29.2px rgba(0, 0, 0, 0.055),
		55.8px 55.8px 45px rgba(0, 0, 0, 0.063),
		100px 100px 80px rgba(0, 0, 0, 0.08);
	padding: 2rem 8rem;
}
</style>
